<template>
  <!-- 导航菜单 -->
  <template v-for="menu in props.userMenu" :key="menu._menuId">
    <el-sub-menu v-if="menu!.children && menu.children.length>0&&menu.children[0].menuType==1" :key="menu.menuId"
      :index="menu.menuId+''">
      <template #title>
        <!-- 动态图标 -->
        <component :is="menu.icon" style="width:20px;height:20px;"></component>
        <span>{{menu.menuName}}</span>
      </template>
      <tree-menu :userMenu="(menu.children as unknown as MenuRow[])" />
    </el-sub-menu>
    <el-menu-item v-else-if="menu.menuType==1" :index="menu.path" :key="menu.path">{{menu.menuName}}</el-menu-item>
  </template>
</template>

<script lang="ts">
export default {
  name: "TreeMenu",
};
</script>
<script setup lang="ts">
import { PropType } from 'vue'
import { MenuRow } from "@/interface/menu"

const props = defineProps({
  userMenu: Array as unknown as PropType<MenuRow[]>,
});

console.log("打印usermenu", props);
</script>
<style lang="scss" scoped>

</style>
